<template>
	<view>
		<simple-toolbar :title="$t('asset.residual.assetResidual2')">
			<text class="key">{{ $t('asset.residual.id') }}</text>
			<text class="value valueId">{{ userName }}</text>
		</simple-toolbar>

<!-- 		<view class="box">
			<view class="item" v-for="(item,index) in formData" :key='index'>
				<text class="key">{{ $t('asset.residual.balance') }}</text>
				<view class="value">
					<text>{{ item.balance }}</text>
					<text class="xch">{{ item.coin_name }}</text>
				</view>
			</view>
		</view> -->
		
		<el-row :gutter="20">
		  <el-col :span="10" class="box" v-for="(item,index) in formData" :key='index'>
				<div class="grid-content bg-purple item">
					<text class="key">{{ $t('asset.residual.balance') }}</text>
					<view class="value">
						<text>{{ item.balance }}</text>
						<text class="xch">{{ item.coin_name }}</text>
					</view>
				</div>
			</el-col>
		</el-row>
	</view>
</template>

<script>
	import {
		getUserResidual,
		getResidual
	} from "../../../js_sdk/uni-admin/asset.js"

	export default {
		data() {
			return {
				userName: '',
				formData: []
			}
		},
		methods: {
			async getData() {
				this.userName = JSON.parse(localStorage.getItem("userInfo")).data.email
				let res = await getResidual()
				this.formData = res.data
				// if (!this.formData) {
				// 	this.formData = {
				// 		id: '-',
				// 		balance: 0
				// 	}
				// }
				this.formData.forEach((item, index) => {
					item.balance = this.$utils.retain12(item.balance)
				})
			}
		},
		onShow() {
			this.getData()
		}
	}
</script>

<style scoped lang="scss">
	page {
		box-shadow: none !important;
		background-color: inherit !important;
	}
	
	.valueId {
		margin-left: 6.25rpx;
	}
	
	.box {
		// display: flex;
		// flex-wrap: wrap;
	}
	
	/deep/ .el-col-10 {
		width: 50%;
		padding: 0!important;
	}
	
	/deep/ .el-col-10:nth-of-type(2n+1) {
		padding-right: 9.76rpx!important;
	}
	
	/deep/ .el-col-10:nth-of-type(2n) {
		padding-left: 9.76rpx!important;
	}

	.item {
		background-color: #FFFFFF;
		border-radius: 4.68rpx;
		box-shadow: 0 0.78rpx 15.62rpx rgba(0, 0, 0, 0.1);
		padding: 9.37rpx;
		margin-bottom: 19.53rpx;
		/* min-width: 195.31rpx; */
		// flex: 0.5;

		display: flex;
		flex-direction: column;
	}
	
	.key {
		color: #3B3E66;
		opacity: 0.8;
		font-size: 6.25rpx;
		margin-bottom: 8.98rpx;
	}

	.value {
		color: #12A234;
		opacity: 0.8;
		font-size: 10.93rpx;
	}
	
	.xch {
		margin-left: 3.12rpx;
		font-size: 7.03rpx;
	}
</style>
